<template>
	<view class="cc-popup-mask" @tap="close" :class="[{'cc-popup-bottom':position=='bottom'}]" v-if="visible">
		<view class="cc-popup-wrap" @tap.stop="close" :style="{'--color':color,'--bgcolor':bgcolor}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cc-popup",
		props: {
			// 位置
			position: {
				type: String,
				default: 'center',
				validator: (val) => ['center', 'bottom'].includes(val)
			},

			hideTabBar: {
				type: Boolean,
				default: false
			},

			color: {
				type: String,
				default: '#007AFF'
			},

			bgcolor: {
				type: String,
				default: '#ffffff'
			},

		},
		computed: {

		},
		data() {
			return {
				visible: false
			};
		},
		mounted() {

		},
		methods: {
			show() {
				if (this.hideTabBar) {
					uni.hideTabBar({
						success: (res) => {},
						fail: (err) => {},
					});
				}
				this.visible = true;
			},

			close() {
				this.visible = false;
				if (this.hideTabBar) {
					uni.showTabBar({
						success: (res) => {},
						fail: (err) => {},
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/cc-ui-tools/scss/theme.scss";
	@import "@/cc-ui-tools/scss/animation.scss";

	.cc-popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100vh;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		animation: fadeIn 0.2s linear both;
	}

	.cc-popup-wrap {
		display: flex;
		flex-direction: column;
		background: var(--bgcolor);
		border-radius: 10px;
		padding: 20rpx 10rpx 10rpx 10rpx;
		font-size: 14px;
		animation: fadeInBig 0.2s 0.2s linear both;
		backdrop-filter: blur(10rpx); //毛玻璃属性
	}

	.cc-popup-bottom {
		align-items: flex-end;

		.cc-popup-wrap {
			width: 100%;
			animation: fadeIn 0.2s linear both;
			animation: fadeInUp 0.2s 0.2s linear both;
			padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
			border-radius: 10px 10px 0 0;
		}
	}
</style>